import { useTheme } from '@/store/settingsStore.ts';
import { ThemeMode } from '@ycx/ui';

const Dot = (props: any) => {
  const theme = useTheme();

  return (
    <div {...props}>
      {theme === ThemeMode.Light ? (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
        >
          <circle opacity="0.2" cx="8" cy="8" r="8" fill="#14151C" />
          <circle cx="8" cy="8" r="4" fill="#14151C" />
        </svg>
      ) : (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
        >
          <circle opacity="0.2" cx="8" cy="8" r="8" fill="white" />
          <circle cx="8" cy="8" r="4" fill="white" />
        </svg>
      )}
    </div>
  );
};

export default Dot;
